<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="baidu-site-verification" content="9ofv3e3Axr"/>
    <meta name="description"
          content="全网实时分析短视频自媒体的影响力和价值，为短视频运营者提供一键上传多平台、跨平台数据跟踪和分析、广告价值匹配等服务。公认最早最权威的短视频服务平台。">
    <meta name="keywords" content="视频帮 短视频推广 视频上传平台 短视频推广 网红排行 视频帮平台">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>上传</title>

    <link href="http://cloud.youku.com/assets/lib/bootstrap2.1.0/css/bootstrap.css" rel="stylesheet">
    <link href="http://cloud.youku.com/assets/lib/bootstrap2.1.0/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="//at.alicdn.com/t/font_c111g110yitnvcxr.css" rel="stylesheet">
    <link rel="stylesheet" href="uploadstyle.css" type="text/css" />
    <script src="http://cloud.youku.com/assets/lib/jquery-1.8.1.min.js"></script>
    <script src="http://cloud.youku.com/assets/lib/uploadjs.php"></script>

    <script>

        var testData = '{"name":"原有的数据一号","accoundId":"1118580528","avatar":"https://static.youku.com/lvip/img/avatar/50/9.png","time":"2017-03-07T08:31:56.054Z","token":"51dc5f0c3d6e0987a2056ae98d870567"}&||&{"name":"二哈","accoundId":"1118580528","avatar":"https://static.youku.com/lvip/img/avatar/50/9.png","time":"2017-03-07T09:08:14.480Z","token":"51dc5f0c3d6e0987a2056ae98d870567"}';

        //数据存取函数
        var saveXbData = function (str){
            console.log('保存了一条数据：'+str+'类型'+ str.constructor )
            testData = str;
        } ;
        var getXbData = function (){

            return testData;
        };


        function Account (accountId,name,avatar,time,token){
            this.name = name || '';
            this.accoundId = accountId || '';
            this.avatar = avatar || '';
            this.time = time || '';
            this.token = token || '';
        }
        Account.prototype = new Account();

        //测试数据
        var XB_CLIENTID  ;
        var XB_BACKURL ;
        var isTest = true;
        XB_CLIENTID = isTest ? 'e9d35b272b7e9d80':'efed086338cb48dc';
        XB_BACKURL = isTest ? 'http://127.0.0.1:63342/videobang/up.html':'http://monitor.xiaobaishiji.com:81/videobang/up.html';


        jQuery(document).ready(function(){
            //定义一个数据存储类
            var DataTool = {
                createNew: function(){
                    var dataTool = {};

                    dataTool.saveSourceData = function (dataArray){
                        console.log('本次需要存储的数据条数为：'+dataArray.length + '\n ');
                        //先把对象数组转换为字符串数组
                        var strArray = new Array();
                        for(x in dataArray){
                            strArray.push(JSON.stringify(dataArray[x]));
                        }
                        var saveStr = strArray.join('&||&');
                        console.log('需要存储的数据：'+saveStr);
                        saveXbData(saveStr);
                    };
                    dataTool.getSourceStrArray = function (){
                        var saveStr = getXbData();
                        console.log('取出的数据：'+saveStr);
                        if(saveStr==null) return;
                        var strArray = saveStr.split('&||&');
                        console.log('取出的数据数组长度：'+strArray.length + "类型：" + strArray.container);
                        return strArray
                    };
                    dataTool.getSourceDataArray = function (){
                        var strArray = this.getSourceStrArray();
                        if(strArray==null) return;
                        var mArray = new Array();
                        for(a in strArray){
                            console.log('取出来的每一个值'+ strArray[a]);
                            mArray.push(JSON.parse(strArray[a]));
                        }
                        return mArray;
                    };

                    //添加一条新的数据  覆盖或追加
                    dataTool.pushNewDataToSource = function (model){
                        //解为一条的字符串
                        var dataStr = JSON.stringify(data);

                        //更新下全局数据
                        this.saveSourceData();
                    };
                    dataTool.getDataWithToken = function (toke,callBcak){
                        $.post('https://openapi.youku.com/v2/users/myinfo.json',{'client_id':XB_CLIENTID,'access_token':access_token},function(data,textStatus){
                            console.log(JSON.stringify(data));

                            //1.获取主要数据
                            var model = new Account(data.id,data.name,data.avatar,new Date().toISOString(),toke);

                            //2.返回对象进行操作
                            callBcak(model)

                        },"json");
                    };
                    return dataTool;
                }
            };
            //数据存放工具
            var tool =DataTool.createNew();
            //存放数据的数组
            var dataArray = tool.getSourceDataArray();
            //添加元素
            reloadAccount(dataArray);
            var access_token = getQueryStringRegExp("access_token");

            if(access_token.length>0){
                //获取个人详细信息
                console.log('发送请求');
                tool.getDataWithToken(access_token,function(model){
                    console.log('解析model'+ model + 'sting:'+JSON.stringify(model));
                    //添加新的数据到组里
                    dataArray.push(model);
                    //保存到本地
                    tool.saveSourceData(dataArray);
                    //有新的认证创建一个认证元素
                    reloadAccount(dataArray);
                });

            }


        });
        function reloadAccount  (dataArray) {
            //移除原有的控件，添加全新控件
            $('#insert_account').empty();
            for(x in  dataArray){
                var model = dataArray[x];
                var html = '<div class="col-md-3 col-xs-3 col-lg-2 account">' +
                        '<a href="javascript:;" class="media-info clickable" data-mid="65555">' +
                        '<div class="avatar-position">' +
                        '<img src= '+model.avatar+' class="avatar">' +
                        '<div class="media-unchecked unchecked-icon-wrapper"></div>' +
                        '<div class="media-checked checked-icon-wrapper">' +
                        '<i class="glyphicon glyphicon-ok checked-icon"></i>' +
                        '</div>' +
                        '</div>' +
                        '<p class="name">'+model.name+'</p>' +
                        '<p class="platform">' +
                        '<img src="static/img/youku.png">优酷' +
                        '</p>' +
                        '</a>' +
                        '</div>';
                $('#insert_account').append(html);
            }
        }
        function getQueryStringRegExp(name){
            var reg = new RegExp("(^|\\#|&)"+ name +"=([^&]*)(\\s|&|$)", "i");

            if (reg.test(location.href)) return unescape(RegExp.$2.replace(/\+/g, " ")); return "";
        };
        //优酷视频上传

        //document.domain = "youku.com";
        var USE_STREAM_UPLOAD = true;
        jQuery(document).ready(function(){
            //Oauth授权的三种页面跳转方式iframe,newWindow,currentWindow
            //iframe跳转方式
            var param = {client_id:XB_CLIENTID,access_token:getQueryStringRegExp('access_token'),oauth_opentype:"iframe",oauth_redirect_uri:XB_BACKURL,oauth_state:"",completeCallback:"uploadComplete",categoryCallback:"categoryLoaded"};
            //newWindow新弹出窗口方式
            //var param = {client_id:"",access_token:"",oauth_opentype:"newWindow",oauth_redirect_uri:"http://test.youku.com/youkuupload/oauth_result_newwindow.html",oauth_state:"",completeCallback:"uploadComplete",categoryCallback:"categoryLoaded"};
            //currentWindow当前窗口方式
            /*
             var param = {client_id:"",access_token:"",oauth_opentype:"currentWindow",oauth_redirect_uri:"http://test.youku.com/youkuupload/upload.html",oauth_state:"",completeCallback:"uploadComplete",categoryCallback:"categoryLoaded"};
             var reg = new RegExp("(^|\\#|&)access_token=([^&]*)(\\s|&|$)", "i");
             if (reg.test(location.href)){
             var access_token = unescape(RegExp.$2.replace(/\+/g, " "));
             param.access_token = access_token;
             }
             */
            youkuUploadInit(param);

        });
        //上传完成时回调方法
        function uploadComplete(data){
            alert("videoid="+data.videoid+";title="+data.title);
        }

        //分类加载后回调方法
        function categoryLoaded(data){
            if(data.categories) {
                var tpl = '';
                for (var i=0; i<data.categories.length; i++) {
                    if(data.categories[i].term == 'Ads'){
                        tpl += '<option value="' + data.categories[i].term + '" selected>' + data.categories[i].label + '</option>';
                    }else{
                        tpl += '<option value="' + data.categories[i].term + '" >' + data.categories[i].label + '</option>';
                    }
                }
                $("#category-node").html(tpl);
            }
        }

    </script>

</head>

<body>
<div class="top-wrap">
<!--<div class="ui active dimmer" id="loader-dimmer">-->
    <!--<div class="ui text loader" style="top: 200px;">载入中...</div>-->
<!--</div>-->
<div class="min">
<nav class="navbar navbar-default tab-wrapper">
    <div class="container">
        <ul class="tab-menu hidden-xs">

            <!--<li class="tab-item"><a href="/up/upload/" class="tab-link active">视频上传</a></li>-->
            <!--<li class="tab-item"><a href="/up/video/" class="tab-link ">视频管理</a></li>-->

        </ul>
    </div><!-- /.container-fluid -->
</nav>
<div class="container" style="padding-bottom: 50px;">

<div class="row">
    <div class="col-md-12 col-sm-12">
        <div class="content">
            <div class="content-title">
                <span>新账号登录</span>
                <a href="javascript:;" class="sub-info" id="account-rule">登录规则</a>
            </div>
            <div class="add-account">
                <div class="row">
                    <div class="box account-box miaopai col-md-3 col-sm-6">
                        <a href="javascript:;" class="inner-box">
                            <img src="static/img/miaopai.png" alt="">

                            <p>秒拍账号</p>
                        </a>
                    </div>
                    <div class="box account-box col-md-3 col-sm-6">
                        <!--e9d35b272b7e9d80-->
                        <!--http://127.0.0.1:63342/videobang/up.html-->
                        <!--回调页为集合界面-->
                        <!--<a href="https://openapi.youku.com/v2/oauth2/authorize?client_id=efed086338cb48dc&response_type=token&redirect_uri=http://monitor.xiaobaishiji.com:81/videobang/up.html" class="inner-box">-->
                            <!--回调界面为上传信息界面-->
                        <a href="https://openapi.youku.com/v2/oauth2/authorize?client_id=e9d35b272b7e9d80&response_type=token&redirect_uri=http://127.0.0.1:63342/videobang/up.html" class="inner-box">
                            <img src="static/img/youku.png" alt="">

                            <p>优酷账号</p>
                        </a>
                    </div>
                    <div class="box account-box iqiyi col-md-3 col-sm-6">
                        <a href="/iqiyi/auth/go/" class="inner-box">
                            <img src="static/img/iqiyi.png" alt="">
                            <p>爱奇艺账号</p>
                        </a>

                    </div>

                </div>

            </div>
        </div>
    </div>

    <div class=" col-sm-12">
        <div class="content" id="select-account">
            <div class="content-title">

                <span>选择发布账号</span>

                <span class="sub-info" id="num-chosen">0 / 1</span>

            </div>
            <div id="insert_account" class="row media-wrapper all-accounts">

            </div>
        </div>
    </div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="content">
<div class="content-title">
    填写视频信息
</div>
<div class="filling-area">
<div class="empty-media-tip">
    <img src="static/img/default.jpg">
    <p>您还未选择发布账号，请点击头像选择发布账号。</p>
</div>

<div class="iqiyi media-form row" data-media-id="65555" id="form_65555"
     style="display: none">

    <div id="youku-upload">

            <form class="well form-horizontal content" name="video-upload">
                <fieldset>
                    <div class="control-group">
                        <label class="control-label" for="spanSWFUploadButton">选择文件：</label>
                        <div id="uploadControl" class="controls"></div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="input01">标题：</label>
                        <div class="controls">
                            <input type="text" class="input-xlarge" id="input01" name="title">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="textarea">简介：</label>
                        <div class="controls">
                            <textarea class="input-xlarge" id="textarea" rows="3" name="description"></textarea>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="input02">标签：</label>
                        <div class="controls">
                            <input type="text" class="input-xlarge" id="input02" name="tags">
                            <span class="help-inline"></span>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="category-node">类别：</label>
                        <div class="controls">
                            <select id="category-node" name="category" ></select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">版权所有</label>
                        <div class="controls">
                            <label class="radio inline">
                                <input type="radio" name="copyright_type" id="copyright_type2" value="original" checked="">原创
                            </label>
                            <label class="radio inline">
                                <input type="radio" name="copyright_type" id="copyright_type1" value="reproduced">转载
                            </label>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">视频权限</label>
                        <div class="controls">
                            <label class="radio inline">
                                <input type="radio" name="public_type" id="public_type1" value="all" checked="">公开
                            </label>
                            <label class="radio inline">
                                <input type="radio" name="public_type" id="public_type2" value="friend">仅好友
                            </label>
                            <label class="radio inline">
                                <input type="radio" name="public_type" id="public_type3" value="password">输入密码观看
                            </label>
                            <label class="radio inline" style="display:none" id="passwrod">
                                <input type="text" class="input "name="watch_password">
                            </label>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary start" id="btn-upload-start">
                            <i class="icon-upload icon-white"></i>
                            <span>开始上传</span>
                        </button>
                    </div>
                </fieldset>
            </form>
            <div class="row" >
                <div class="span5" id="upload-status-wraper" ></div>
            </div>
            <br>
        </div>
        <!--完成上传的DOM和登录DOM 开始-->
        <div id="complete"></div>
        <div id="login" style="width:100%;height:100%;position:fixed;z-index:999;left:0px;top:0px;overflow:hidden;display:none;">
        </div>
        <!--完成上传的DOM和登录DOM 结束-->


</div>


<div class="common media-form row" style="display: none">
    <div class="col-md-2">
        <div class="media-info">
            <div class="avatar-position">
                <img src="http://mvavatar2.meitudata.com/57ac7bff04dea7208.jpg" class="avatar">
                <div class="media-checked checked-icon-wrapper"><i
                        class="glyphicon glyphicon-ok checked-icon"></i></div>
            </div>
            <p class="name">papi酱</p>
            <p class="platform">通用</p>
        </div>
    </div>
    <div class="col-md-9">
        <div class="saved" style="display: none">
            <div class="row">
                <div class="col-md-9 col-sm-9">
                    <p class="v-title">每周一的大放送吃屎的孩子<span class="remark">这篇谁看谁傻逼</span><span
                            class="is-pub">公开</span>
                    </p>
                    <p class="des">这是一篇关于如何吃屎的指南,希望所有粉丝看到我的努力,我的汗水和我吃下的每一坨大便,随便你叫他什么好了,便便。</p>
                    <div class="category-wrapper">
                        <p class="v-category">美食/生活</p>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3">
                    <div class="cover-preview visible"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <a class="bottom-btn" href="javascript:;">
                        <i class="caret down icon"></i><span>编辑</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="unsaved ui form">
            <div class="inline fields auto-fill">
                <p class="v-label"></p>
                <div class="field blue-text">
                    <a class="button ui auto-fill-button">
                        <i class="iconfont icon-tianxie"></i>
                        点此自动填表
                    </a>
                    <div class="auto-fill-done"><i class="iconfont icon-right-1"></i>填写完成</div>

                </div>
            </div>
            <div class="inline fields">
                <p class="v-label">标题<span class="required">*</span></p>
                <div class="field">
                    <input type="text" name="name" placeholder="请输入视频的标题" class="counting"
                           data-maxlength="20">
                    <span class="counter">0 / 20</span>
                </div>
            </div>
            <div class="inline fields">
                <p class="v-label">标题<span class="required">*</span></p>
                <div class="field">
                    <textarea data-maxlength="140" name="description" class="counting"
                              placeholder="请输入视频的标题"
                              rows="4"></textarea>
                    <span class="counter">0 / 140</span>
                </div>
            </div>
            <div class="inline fields">
                <p class="v-label">食品类别<span class="required">*</span></p>
                <div class="field">
                    <select class="drop fluid selection search" name="category">
                        <option value="1">yi</option>
                        <option value="2">er</option>
                        <option value="3">san</option>
                        <option value="4">four</option>
                        <option value="5">five</option>
                        <option value="6">six</option>
                    </select>
                </div>
            </div>
            <div class="inline fields">
                <p class="v-label">食品类别<span class="required">*</span></p>
                <div class="field">
                    <div class="up-radio">
                        <input id="paike" type="radio" name="v-type">
                        <label for="paike">拍客</label>
                    </div>
                </div>
                <div class="field">
                    <div class="up-radio">
                        <input id="yuanchuang" type="radio" name="v-type">
                        <label for="yuanchuang">原创</label>
                    </div>
                </div>
                <div class="field">
                    <div class="up-radio">
                        <input id="zhuanzai" type="radio" name="v-type" checked="checked">
                        <label for="zhuanzai">转载</label>
                    </div>
                </div>
            </div>
            <div class="inline fields">
                <p class="v-label">视频标签</p>
                <div class="field">
                    <select class="drop fluid selection addition search" name="tag" multiple>
                    </select>
                </div>
            </div>

            <div class="inline fields">
                <p class="v-label">定时发布</p>
                <div class="field timing">
                    <input type="text" name="timing" placeholder="开始发布(上传)至平台的时间, 可选时间为最近七日。">
                </div>
            </div>

            <div class="inline fields">
                <p class="v-label"></p>
                <div class="field">
                    <input name="cover" type="file" class="hidden">
                    <a class="button ui cover-btn"><i class="iconfont icon-jiahao"></i>上传封面</a>
                    <span class="file-tip">请上传jpg/png结尾且大小小于3MB的图片</span>
                </div>
            </div>
            <a class="bottom-btn submit" href="javascript:;">
                <i class="caret up icon"></i><span>保存并收起</span>
            </a>
        </div>
    </div>
    <div class="col-md-1">
    </div>
    <div class="triangle-bottom-right"></div>
    <div class="saved-label"><i class="glyphicon glyphicon-ok saved-icon"></i></div>
</div>
</div>
</div>
</div>
</div>

<div class="ui modal small" id="video-process">
    <a class="close-btn" href="javascript:;">
        <i class="iconfont icon-iconfontcha"></i>
    </a>
    <div class="up-header">视频处理流程</div>
    <div class="up-content">
        <p>① 上传完成后，系统将进行转码，自动将原始文件转化为各平台支持的格式。</p>
        <p>② 视频转码时间由视频大小决定，转码完成后，如视频内容符合平台要求，视频才能成功发布。</p>
        <p>③ 如视频内容不符合其中某一平台的要求，可能会导致该平台发布失败。</p>
    </div>
</div>
<div class="ui modal small" id="forbidden">
    <a class="close-btn" href="javascript:;">
        <i class="iconfont icon-iconfontcha"></i>
    </a>
    <div class="up-header">哪些视频是禁止上传的</div>
    <div class="up-content">
        <p>《互联网信息服务管理办法》所严禁的九类信息</p>
        <p>（一）反对宪法所确定的基本原则的；</p>
        <p>（二）危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</p>
        <p>（三）损害国家荣誉和利益的；</p>
        <p>（四）煽动民族仇恨、民族歧视，破坏民族团结的；</p>
        <p>（五）破坏国家宗教政策，宣扬邪教和封建迷信的；</p>
        <p>（六）散布谣言，扰乱社会秩序，破坏社会稳定的；</p>
        <p>（七）散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</p>
        <p>（八）侮辱或者诽谤他人，侵害他人合法权益的；</p>
        <p>（九）含有法律、行政法规禁止的其他内容的。</p>
    </div>
</div>
</div>
<a id="hi"></a>
<div id="console"></div>

</div>

<div class="ui form modal small unsaved" id="set-pw-phone-num">
    <div class="up-header">绑定手机号</div>
    <div class="up-content">
        <div class="errors">
        </div>
        <form class="set-pw-phone-num ui form segment">
            <input type='hidden' name='csrfmiddlewaretoken' value='LweVmIRi58E3glqNDhSkvr8rPTLVOcRR' />
            <div class="unsaved ui form">
                <div class="inline fields">
                    <p class="v-label">手机号<span class="required">*</span></p>
                    <div class="field title">
                        <input type="text" name="phone" placeholder="例：18712345678" class="counting">
                    </div>
                </div>
                <div class="inline fields">
                    <p class="v-label">验证码<span class="required">*</span></p>
                    <div class="ui right labeled input field title">
                        <input type="text" name="verification-num" placeholder="请输入5位验证码" class="counting ver">
                        <a class="ui label combo send-phone-verification-num enable">
                            <div class="text ver-button">发送验证码</div>
                        </a>
                    </div>
                </div>
                <div class="inline fields">
                    <p class="v-label">设置密码<span class="required">*</span></p>
                    <div class="field title">
                        <input type="password" name="pw1" class="counting">
                    </div>
                </div>
                <div class="inline fields">
                    <p class="v-label">确认密码<span class="required">*</span></p>
                    <div class="field title">
                        <input type="password" name="pw2" class="counting">
                    </div>
                </div>
                <div class="inline fields">
                    <p class="v-label">推荐人</p>
                    <div class="field title">
                        <input type="text" name="recommender" placeholder="请输入4位推荐号码-数字英文组合" class="counting">
                    </div>
                </div>
                <div class="inline fields action">
                    <a class="save-pw-phone-num ui submit button" href="javascript:;">确 认</a>
                </div>
                <div class="clear"></div>
            </div>
        </form>
    </div>
</div>


<script src="static/js/main.js" id="kf5-provide-supportBox" kf5-domain="kbstreet.kf5.com"></script>

<script type="text/javascript" src="upload.js"></script>

<script>
    $(function () {
        $('#loader-dimmer').fadeOut();
    })
</script>
</body>
</html>